import { textFit } from '@textfit/core'

const widthSlider = document.getElementById('widthSlider') as HTMLInputElement
const widthLabel = document.getElementById('widthLabel') as HTMLSpanElement
const box1 = document.getElementById('box1') as HTMLDivElement
const box2 = document.getElementById('box2') as HTMLDivElement
const single = document.getElementById('single') as HTMLDivElement
const multi = document.getElementById('multi') as HTMLParagraphElement

const singleInst = textFit(single, {
	multiline: false,
	ellipsis: true,
	animate: 160,
	fontReady: true,
})

const multiInst = textFit(multi, {
	multiline: true,
	ellipsis: '…',
	animate: 160,
	fontReady: true,
	breakpoints: {
		0: { min: 12, max: 20 },
		768: { min: 14, max: 26 },
	},
})

function applyWidth(px: number) {
	box1.style.width = `${px}px`
	box2.style.width = `${px}px`
	widthLabel.textContent = String(px)
	singleInst.resize()
	multiInst.resize()
}

widthSlider.addEventListener('input', () => applyWidth(Number(widthSlider.value)))
window.addEventListener('resize', () => {
	singleInst.resize()
	multiInst.resize()
})

single.addEventListener('textfit:resized', (e) => {
	// 可以在这里查看当前字号: (e as CustomEvent).detail.fontSize
})

applyWidth(Number(widthSlider.value)) 